<template>
    <div class="login-register">
        <div class="logo">
            <img src="@/assets/logo.png" alt="">
        </div>

        <div class="tab">
            <span @click="showLogin" :class="{ 'active': isLogin }">登陆</span>
            <span @click="showRegister" :class="{ 'active': !isLogin }">注册</span>
        </div>

        <div v-if="isLogin" class="login">
            <van-form @submit="onLogin">
                <van-cell-group inset>
                    <van-field v-model="username" name="username" label="用名" placeholder="用户名"
                        :rules="[{ required: true, message: '请填写用户名' }]" />
                    <van-field v-model="password" type="password" name="password" label="密码" placeholder="密码"
                        :rules="[{ required: true, message: '请填写密码' }]" />
                </van-cell-group>
                <div style="margin: 16px;">
                    <van-button round block type="primary" native-type="submit">
                        登陆
                    </van-button>
                </div>
            </van-form>
        </div>

        <div v-else class="register">
            <van-form @submit="onRegister">
                <van-cell-group inset>
                    <van-field v-model="username" name="username" label="用名" placeholder="用户名"
                        :rules="[{ required: true, message: '请填写用户名' }]" />
                    <van-field v-model="password" type="password" name="password" label="密码" placeholder="密码"
                        :rules="[{ required: true, message: '请填写密码' }]" />
                    <van-field v-model="verifyCode" type="text" name="verifyCode" label="验证码" placeholder="验证码"
                        :rules="[{ required: true, message: '请填写验证码' }]">
                        <template #button>
                            <!-- <van-button size="small" type="primary">发送验证码</van-button> -->
                            <verifyImg ref="verifyImgRef"></verifyImg>
                        </template>
                    </van-field>
                </van-cell-group>
                <div style="margin: 16px;">
                    <van-button round block type="primary" native-type="submit">
                        注册
                    </van-button>
                </div>
            </van-form>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import verifyImg from '@/components/verifyCode.vue';
import axios from '@/api/index.js'
import { showSuccessToast } from 'vant';
import router from '@/router/index.js'


const username = ref('18720010896');
const password = ref('123456');
const verifyCode = ref('');
const isLogin = ref(true)
const verifyImgRef = ref('')

const onRegister = (values) => {
    console.log('submit', values);
    console.log(verifyImgRef.value.verifyCode);
    // 发注册的接口请求
    if (values.verifyCode === verifyImgRef.value.verifyCode) {  // 允许注册
        // 将账号和密码发送给后端
        axios.post('/api/user/register', {
            username: values.username,
            password: values.password
        }).then(res => {
            console.log(res);
            showSuccessToast(res.msg)
            isLogin.value = true
        })
    }
};

const onLogin = async (values) => {
    //console.log('submit', values);
    // 'api/user/login'
    const res = await axios.post('api/user/login', {
        username: values.username,
        password: values.password
    })
    // 保存 token
    localStorage.setItem('token', res.data.token)
    //console.log(res);
    showSuccessToast(res.message)
    router.push('/home')
}

const showLogin = () => {
    isLogin.value = true;
}

const showRegister = () => {
    isLogin.value = false;
}
</script>

<style lang="less" scoped>
.logo {
    img {
        display: block;
        margin: 0 auto;
    }
}

.tab {
    display: flex;
    padding: 0.5rem 0.7rem;
    color: rgb(54, 169, 58);
    font-size: 0.5rem;
    font-weight: bolder;

    span {
        margin-right: 0.6rem;
        padding: 5px 0;

        &.active {
            border-bottom: 1px solid rgb(54, 169, 58);
            font-size: 0.55rem;
        }
    }
}

.van-button {
    background-color: rgb(54, 169, 58);
}
</style>